<template>
  <div class="_wz_cent_main safetyManagementStatistics">
    <div class="theme">
      <Row :gutter="10" style="height:150px;">
        <i-col span="7" style="height: 100%;">
          <Card dis-hover style="height:  100%;">
            <p slot="title">安全生产例会</p>
            <p slot="extra" style="color: #2d8cf0;">
              {{!!safetyStatistics.meetingCount?safetyStatistics.meetingCount.meetingAllCount:'0'}}
            </p>
            <Row :gutter="10" style="height:100%;margin: 10px 0;padding: 10px 10px;">
              <i-col span="8" style="height: 100%;text-align: center;">
                <div style="font-size: 18px;color: #ed4014;line-height: 30px;">{{!!safetyStatistics.meetingCount?safetyStatistics.meetingCount.meetingUnStartCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;">未召开</div>
              </i-col>
              <i-col span="8" style="height: 100%;text-align: center;border-right: 1px solid #e8eaec;border-left: 1px solid #e8eaec;">
                <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!safetyStatistics.meetingCount?safetyStatistics.meetingCount.meetingUnFinishCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;">进行中</div>
              </i-col>
              <i-col span="8" style="height: 100%;text-align: center;">
                <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!safetyStatistics.meetingCount?safetyStatistics.meetingCount.meetingFinishCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;">已完成</div>
              </i-col>
            </Row>
          </Card>
        </i-col>

        <i-col span="7" style="height: 100%;">
          <Card dis-hover style="height:  100%;">
            <p slot="title">行车日志</p>
            <p slot="extra" style="color: #2d8cf0;">
              {{!!safetyStatistics.drivingLogCount?safetyStatistics.drivingLogCount.drivingLogAllCount:'0'}}
            </p>
            <Row :gutter="10" style="height:100%;margin: 10px 0;padding: 10px 10px;">
              <i-col span="8" style="height: 100%;text-align: center;">
                <div style="font-size: 18px;color: #ed4014;line-height: 30px;">{{!!safetyStatistics.drivingLogCount?safetyStatistics.drivingLogCount.drivingLogBeforeCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;">出车前</div>
              </i-col>
              <i-col span="8" style="height: 100%;text-align: center;border-right: 1px solid #e8eaec;border-left: 1px solid #e8eaec;">
                <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!safetyStatistics.drivingLogCount?safetyStatistics.drivingLogCount.drivingLogMidwayCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;">行车中</div>
              </i-col>
              <i-col span="8" style="height: 100%;text-align: center;">
                <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!safetyStatistics.drivingLogCount?safetyStatistics.drivingLogCount.drivingLogAfterCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;">收车后</div>
              </i-col>
            </Row>
          </Card>
        </i-col>

        <i-col span="5" style="height: 100%;">
          <Card dis-hover style="height:  100%;">
            <p slot="title">隐患排查清单</p>
            <p slot="extra" style="color: #2d8cf0;">
              {{!!safetyStatistics.riskCount?safetyStatistics.riskCount.riskCheckAllCount:'0'}}
            </p>
            <Row :gutter="10" style="height:100%;margin: 10px 0;padding: 10px 10px;">
              <i-col span="12" style="height: 100%;text-align: center;">
                <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!safetyStatistics.riskCount?safetyStatistics.riskCount.riskCheckUnHandleCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;">未整改</div>
              </i-col>
              <i-col span="12" style="height: 100%;text-align: center;border-left: 1px solid #e8eaec;">
                <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!safetyStatistics.riskCount?safetyStatistics.riskCount.riskCheckHandleCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;">已整改</div>
              </i-col>
            </Row>
          </Card>
        </i-col>

        <i-col span="5" style="height: 100%;">
          <Card dis-hover style="height:  100%;">
            <p slot="title">隐患排查整改</p>
            <p slot="extra" style="color: #2d8cf0;">
              {{!!safetyStatistics.riskDetailCount?safetyStatistics.riskDetailCount.riskCheckAllCount:'0'}}
            </p>
            <Row :gutter="10" style="height:100%;margin: 10px 0;padding: 10px 10px;">
              <i-col span="12" style="height: 100%;text-align: center;">
                <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!safetyStatistics.riskDetailCount?safetyStatistics.riskDetailCount.riskCheckUnHandleCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;">未整改</div>
              </i-col>
              <i-col span="12" style="height: 100%;text-align: center;border-left: 1px solid #e8eaec;">
                <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!safetyStatistics.riskDetailCount?safetyStatistics.riskDetailCount.riskCheckHandleCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;">已整改</div>
              </i-col>
            </Row>
          </Card>
        </i-col>


      </Row>
      <Row :gutter="10" style="margin-top: 10px;height:352px">
        <i-col span="16" style="height:100%;">
          <Card style="height:100%;">
              <p slot="title">安全例会月统计</p>
              <div style="height: 100%;overflow: hidden;" ref="homeTopHeight">
                <regionalDiscount :leftHeight="homeTopHeight" v-if="homeTopHeight !== 0 && homeAnalysisLoanMonthNum.type" :homeAnalysisLoanMonthNum="homeAnalysisLoanMonthNum"></regionalDiscount>
              </div>
          </Card>
        </i-col>
        <i-col span="8" style="height:100%;">
          <Card style="height:100%;">
            <p slot="title">安全通知统计</p>
            <div style="height: 100%" ref="lineChart2H">
              <line-chart6 :bottomHeight="lineChart2H" v-if="lineChart2H !== 0 && lineChart6PoliceData.type" :lineChart6Data="lineChart6PoliceData"></line-chart6>
            </div>
          </Card>
        </i-col>
      </Row>
      <Row :gutter="10" style="height:calc(100% - 352px - 150px - 20px);margin-top: 10px">
        <i-col span="14" style="height: 100%">
          <Card style="height: 100%">
            <p slot="title">行车日志</p>
            <div style="height:100%" ref="wzTopHeight">
              <lineChart2 :bottomHeight="topHeight" v-if="topHeight != 0 && lineChart2Data.type" :lineChart2Data="lineChart2Data"></lineChart2>
            </div>
          </Card>
        </i-col>
        <i-col span="10" style="height: 100%">
          <Card style="height: 100%">
            <p slot="title">隐患排查统计</p>
            <div style="height: 100%">
              <bingTu :topHeight="topHeight" v-if="topHeight != 0 && bingTuType" :bingTuData="bingTuData"></bingTu>
            </div>
          </Card>
        </i-col>
      </Row>
    </div>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
  import lineChart6 from '../../../components/Chart/lineChart/lineChart6.vue'
  import lineChart2 from "../../../components/Chart/lineChart/lineChart2";
  import bingTu from "../../../components/Chart/lineChart/bingTu";
  import regionalDiscount from "../../../components/Chart/lineChart/regionalDiscount";



  export default {
  components:{
    lineChart6,
    lineChart2,//
    bingTu,
    regionalDiscount,
  },
  data() {

    return {

      homeAnalysisLoanMonthNum: {//合同月统计
        "id": "homeAnalysisLoanMonthNumId",
        "data": [],
        "unit": "单位（次）",
        "style": {
          "padding": [20, 20, 80, 60]
        },
        type: false,
        list:true,
      },
      homeTopHeight:0,

      spinShow:false,//本页加载
      spinNum: 6,
      safetyStatistics:{},//统计各个总数
      topHeight: 0,
      lineChart2H:0,

      //安全通知每月统计12月
      lineChart6PoliceData: {//30天报警
        type: false,
        "id": "charId7",
        "data": [],
        "unit": "公里",
        "style": {
          "padding": [30, 38, 60, 38]
        }
      },

      //行车日志
      lineChart2Data: {
        type: false,
        "id": "charId9",
        "data": [],
        "unit": "",
        "style": {
          "padding": [30, 20, 30, 60]
        }
      },
      //安全证书
      bingTuType: false,
      bingTuData: {
        "id": "bingTuData",
        "data": [],
        "unit": "",
        "style": {
          "padding": [20, 20, 50, 20]
        }
      },



    }

  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    that.$nextTick(function () {
      that.topHeight = that.$refs.wzTopHeight.offsetHeight;
      that.homeTopHeight = that.$refs.homeTopHeight.offsetHeight;

      that.lineChart2H = that.$refs.lineChart2H.offsetHeight;
      window.onresize = function () {
        that.topHeight = that.$refs.wzTopHeight.offsetHeight;
        that.homeTopHeight = that.$refs.homeTopHeight.offsetHeight;
        that.lineChart2H = that.$refs.lineChart2H.offsetHeight;
      };
    });



    that.spinShow = true;
    that.axios.post(that.apiUrl.webApi + "/statistics/pc/safetyStatistics",{}).then(res => {
      that.spinShow = false;
      if (!!res) {
        that.safetyStatistics = res.data.data;

        //行车日志
        res.data.data.drivingLog.forEach(function (k, i) {
          that.lineChart2Data.data.push({
            month: k.nowDateStr,//
            city: '单位（次）',
            temperature: k.drivingLogSum
          })
        })
        that.lineChart2Data.type = true;

        //会议完成情况
        that.homeAnalysisLoanMonthNum.data = [];
        res.data.data.meetingYear.forEach((k, i) => {
          that.homeAnalysisLoanMonthNum.data.push({'year': k.nowDateStr,type:'领导小组例会', "value": parseFloat(k.ratio) })
        })
        that.homeAnalysisLoanMonthNum.type = true;

        //隐患排查分类
        var data = [
          {item:'专项排查',percent:res.data.data.riskCheckCount.riskCheckZXPCCount},
          {item:'季节排查',percent:res.data.data.riskCheckCount.riskCheckJJXPCCount},
          {item:'节假日排查',percent:res.data.data.riskCheckCount.riskCheckJJRPCCount},
          {item:'隐患排查',percent:res.data.data.riskCheckCount.riskCheckYHPCCount},
        ];
        that.bingTuData.data = data;
        that.bingTuType = true;

        //安全资质
        that.lineChart6PoliceData.data = [
          {company: '过期',type:'营业执照',value:!!res.data.data.certificateUniformCount.certificateUniformExpireCount?res.data.data.certificateUniformCount.certificateUniformExpireCount:0},
          {company: '正常',type:'营业执照',value:!!res.data.data.certificateUniformCount.certificateUniformNormalCount?res.data.data.certificateUniformCount.certificateUniformNormalCount:0},

          {company: '过期',type:'运输许可证',value:!!res.data.data.certificateBusinessCount.certificateBusinessExpireCount?res.data.data.certificateBusinessCount.certificateBusinessExpireCount:0},
          {company: '正常',type:'运输许可证',value:!!res.data.data.certificateBusinessCount.certificateBusinessNormalCount?res.data.data.certificateBusinessCount.certificateBusinessNormalCount:0},

          {company: '过期',type:'标准化证书',value:!!res.data.data.certificateCriterionCount.certificateCriterionExpireCount?res.data.data.certificateCriterionCount.certificateCriterionExpireCount:0},
          {company: '正常',type:'标准化证书',value:!!res.data.data.certificateCriterionCount.certificateCriterionNormalCount?res.data.data.certificateCriterionCount.certificateCriterionNormalCount:0},

          {company: '过期',type:'安全资质证书',value:!!res.data.data.certificateSafetyCount.certificateSafetyExpireCount?res.data.data.certificateSafetyCount.certificateSafetyExpireCount:0},
          {company: '正常',type:'安全资质证书',value:!!res.data.data.certificateSafetyCount.certificateSafetyNormalCount?res.data.data.certificateSafetyCount.certificateSafetyNormalCount:0},


          {company: '过期',type:'安全责任险',value:!!res.data.data.certificateInsuranceCount.certificateInsuranceExpireCount?res.data.data.certificateInsuranceCount.certificateInsuranceExpireCount:0},
          {company: '正常',type:'安全责任险',value:!!res.data.data.certificateInsuranceCount.certificateInsuranceNormalCount?res.data.data.certificateInsuranceCount.certificateInsuranceNormalCount:0},

        ];
        that.lineChart6PoliceData.type = true;








      }
    }).catch(err => {
      console.log('失败', err);
    })



  },
  methods: {//执行的方法

  },
  watch: {//监听
  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态
    window.onresize = null;

  }
}
</script>
<style lang="less">
.safetyManagementStatistics {
  height: 843px!important;
  .ivu-card-body {
    padding: 8px !important;
    height: calc(100% - 51px);
  }

  .theme {
    width: 100%;
    height: 100%;
  }

  .x_above {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .x_above > li {
    list-style: none;
    float: left;
    margin-left: 30px;
    width: calc((100% - 120px) / 6);
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .devil {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}

</style>
